<template>
    <el-dialog title="题目预览" width="900px" :visible="isShow" @close="close">
    <el-row>
      <el-col :span="6">【题型】：{{list.questionType | filterType}}</el-col>
      <el-col :span="6">【编号】：{{list.id}}</el-col>
      <el-col :span="6">【难度】：{{list.difficulty | filterDifficulty}}</el-col>
      <el-col :span="6">【标签】：{{list.tags}}</el-col>
      <el-col :span="6">【学科】：{{list.subjectName}}</el-col>
      <el-col :span="6">【目录】：{{list.directoryName}}</el-col>
      <el-col :span="6">【方向】：{{list.direction}}</el-col>
    </el-row>
    <hr>
    <el-row>
        <el-col :span="24">
            【题干】：
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24" style="color:blue">
            {{list.question | html2Text}}
        </el-col>
    </el-row>
    <!-- 单选区 -->
    <el-row v-if="list.questionType==='1'">
        <el-col :span="24" >
            单选题 选项：（以下选中的选项为正确答案）
        </el-col>
        <el-col class="checkbox" v-for="(item,index) in list.options" :key="index">
          <el-radio :value="item.isRight===1?index:''"  :label="index">{{item.title}}</el-radio>
        </el-col>
    </el-row>
    <!-- 多选区 -->
    <el-row v-else-if="list.questionType==='2'">
        <el-col :span="24" >
            多选题 选项：（以下选中的选项为正确答案）
        </el-col>
        <el-col class="checkbox" v-for="(item,index) in list.options" :key="index">
          <el-checkbox  :value="item.isRight===1?true:false">{{item.title}}</el-checkbox>
        </el-col>
    </el-row>
    <!-- 简答 -->

    <hr>
    <el-row>
        <el-col :span="24">
            【参考答案】：
            <el-button type="danger" size="small" @click="showVideo">视频答案预览</el-button>
            <div style="width:400px;height:300px" v-if="show"><video  controls style="width:100%;height:100%" src=" answerList.videoURL" ref="video"></video>
            </div>
        </el-col>
    </el-row>
    <hr>
    <el-row>
        <el-col :span="24">
            【答案解析】：
            {{list.answer | html2Text}}
        </el-col>
    </el-row>
    <hr>
    <el-row>
        <el-col :span="24">
            【题目备注】：
            {{list.remarks}}
        </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'Preview',
  data () {
    return {
      show: false
    }
  },
  created () {},
  mounted () {},
  components: {},
  props: {
    // 接收变量控制弹层显示隐藏
    isShow: {
      type: Boolean,
      default: false
    },
    // 接收题目数据渲染
    list: {
      type: Object,
      required: true
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 关闭弹层
    close () {
      this.$emit('update:isShow', false)
    },
    // delHtmlTag (str) {
    //   return str.replace(/<[^>]+>/g, '').replace(/&nbsp;/ig, '')
    // },
    // 点击视频预览
    showVideo () {
      // console.log(1111)
      if (this.list.videoURL) {
        this.show = true
      } else {
        this.$message('此题目无视频解析')
      }
    }
  }
}
</script>

<style scoped>
.el-col{
    margin-bottom: 12px;
}
.checkbox{
    display: flex;
    flex-direction: column;
}
.el-checkbox{
    margin: 8px 0;
}
</style>
